<template>
  <div class="form_item-file flex" :class="{only_img:only_img, is_list:is_list}" style="flex-wrap: wrap;max-width: 100%;">
    <input v-if="!is_info" type="hidden" :name="name" :value="value" />
    <template v-if="only_img">
      <div v-if="!is_info && (more || !value)" class="img upload" @click="onclick">
        <img src="../../../assets/img/upload.png">
      </div>
      <div class="img" :draggable="is_info?'false':'true'" @dragstart="dragstart(row)" @dragover.prevent="" @drop="drop(row)" v-for="(row,i) in value_arr">
        <el-image style="width: 100%;height: 100%;" :title="is_info?'':(more?'拖动排序':'更换图片需要先删除后重新上传')" draggable="false" fit="contain"
                  :src="img_src(row)" :preview-src-list="preview_list" :initial-index="i"
                  :preview-teleported="true" :infinite="false" referrerpolicy="no-referrer" ></el-image>
        <i v-if="!is_info" ico="s94" class="ico-jia" @click="remove(row)" style="transform: rotate(45deg);"></i>
      </div>
      <el-button v-if="download && value_arr.length>1" @click="download_zip" type="success">打包下载</el-button>
    </template>
    <template v-else>
      <div v-for="row in value_arr" class="flex" style="width: 100%;">
        <p class="text-ellipsis" style="width: auto;flex-shrink: 1;">{{show_path(row)}}</p>
        <el-button size="small" style="margin: 0 2px;" @click="show_file(row)" type="info">预览</el-button>
        <el-button v-if="download" size="small" style="margin: 0 2px;" @click="download_row(row)" type="success">下载</el-button>
        <el-button v-if="!is_info" size="small" style="margin: 0 2px;" @click="remove(row)" type="danger">删除</el-button>
      </div>

      <el-button v-if="download && value_arr.length>1" @click="download_zip" type="success">打包下载</el-button>
      <el-button v-if="!is_info" type="primary" @click="onclick">选择素材</el-button>

    </template>
  </div>
</template>

<script>
import mp3_img from "@/assets/img/file_type/mp3.png";
import mp4_img from "@/assets/img/file_type/mp4.png";
import {_href} from "@/js/s94_tool.js";
import s94Mjs from "s94-js";
import {iframe, msg, show_file} from "@/js/tool.js";

export default {
  _title_: '文件素材',
  _can_config_: true,
  _can_form_param_public_: true,
  _can_form_param_: true,
  name: "file",
  props: ['name', 'value', 'config', 'is_info', 'more', 'protocol', 'img_src_callback', 'select_after_callback', 'size', 'is_list', 'download'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: this.value,
    }
  },
  methods: {
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    img_src(v){
      if (typeof(this.img_src_callback) == 'function') v = this.img_src_callback(v);
      return _href(v);
    },
    show_path(path){
      return path.replace(/^[\s\S.]+\//,"")
    },
    select_after(selected){
      if (typeof(this.select_after_callback) == 'function') return this.select_after_callback(selected);
      let arr = [];
      for (let i = 0; i < selected.length; i++) {
        let v = selected[i]['url'];
        if (!v) {
          this.$message.error('所选素材缺少url');
          return [];
        }
        if (this.protocol && ~['http','https'].indexOf(this.protocol)){
          v = v.replace(/^(https?:)?\/\//, this.protocol+'://')
        }
        arr.push(v)
      }
      return arr;
    },
    onclick(){
      let app = this;
      let iframe_url = '/file/index'+(this.config ? '?type='+this.config : '');
      iframe({
        href: iframe_url,
        btns: {
          '确定_primary'(win_app){
            let arr = app.select_after(win_app.$refs['list_url'].selected);
            if (arr.length == 0) return ;
            let val = '';
            if (app.more){
              val = app.value_arr.concat(arr).join(',');
            }else {
              if (arr.length != 1) return msg.error('只能选择一个');
              val = arr[0];
            }
            app.update_value(val);
            app.this_value = val;
            win_app.__iframe.show = false;
          },
        }
      })
    },
    show_file: show_file,
    remove(row){
      let value_arr = this.value_arr;
      let i = value_arr.indexOf(row);
      if(i == -1) return;
      value_arr.splice(i, 1);
      let val = value_arr.join(',');
      this.update_value(val);
    },
    dragstart(row){
      this.dragItem = row;
    },
    drop(row){
      if(!this.dragItem) return;
      let value_arr = this.value_arr;
      let si = value_arr.indexOf(this.dragItem);
      let i = value_arr.indexOf(row);
      if(si == -1 || i == -1) return;
      value_arr[i] = this.dragItem;
      value_arr[si] = row;
      this.dragItem = undefined;
      let val = value_arr.join(',');
      this.update_value(val);
    },
    download_row(row){
      window.open(row, '_blank')
    },
    download_zip(){
      let param = {url_list: Object.values(this.value_arr)}
      window.open(_href("/admin/file/download_zip?"+s94Mjs.param_encode(param)), '_blank');
    }
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.value;
    }
  },
  computed:{
    only_img(){
      if (!this.config) return false;
      let img_type = ['jpg','jpeg','png','gif','webp'];
      let arr = this.config ? this.config.split(',') : [];
      for (let i = 0; i < arr.length; i++) {
        if (!~img_type.indexOf(arr[i])) return false
      }
      return true;
    },
    value_arr: function(){
      let val = s94Mjs.trim(s94Mjs.to_string(this.value), ',');
      if (!val) return [];
      return val.split(',');
    },
    preview_list(){
      let res = [];
      this.value_arr.forEach((v)=>{
        res.push(this.img_src(v))
      })
      return res;
    }
  },
}
</script>

<style scoped>
.form_item-file>.img{width: 120px;height: 120px;margin: 5px;position: relative;border: 01px solid var(--sm_bg);background-image: url("@/assets/img/show_img_bg.png");}
.form_item-file.is_list>.img{width: 30px;height: 30px;margin: 1px;border: none;}
.form_item-file.only_img{display: inline-flex;}
.form_item-file>.img.upload{border: none;background: none;}
.form_item-file>.img>i{position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;background: var(--fail);color: var(--bg);display: flex;justify-content: center;align-items: center;border-radius: 50%;}
</style>